<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('商家详情')"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资料信息</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .content {
            padding: 0 50px;
        }

        .small-title {
            display: flex;
            align-items: center;
            margin: 8px 0 20px;
        }

        .small-title > div {
            width: 4px;
            height: 24px;
            background-color: #4787F8;
            border-radius: 0 px 2px 2px 0px;
            margin-right: 12px;
        }

        .children {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 60px;
        }

        .name {
            color: #333;
            font-size: 14px;
        }

        .flex-center {
            display: flex;
            align-items: center;
            flex-direction: row;
        }

        .flex-colunm {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .red {
            font-size: 14px;
            color: #EF2A2A;
        }

        .all {
            margin-bottom: 20px;
        }

        .left {
            text-align: right;
            width: 150px;
        }

        .right {
            margin-left: 20px;
            width: 380px;
        }

        textarea {
            resize: none;
        }

        .flex-warp {
            display: flex;
            flex-wrap: nowrap;
        }

        .img {
            width: 160px;
            height: 160px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="small-title">
            <div></div>
            <input type="hidden" id="productId" th:value="${goodsInfo.id}">
            <span>基本信息</span>
        </div>
        <input id="albums" type="hidden" value="" th:value="${goodsInfo.albumPics}">
        <div class="children">
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">商品名称：</span>
                </div>
                <div class="right">
                    <input type="text" disabled value='张三丰' th:value="${goodsInfo.name}">
                </div>
            </div>
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">商品类别：</span>
                </div>
                <div class="right">
                    <input type="text" disabled value='13675454154' th:value="${goodsInfo.productCategoryName}">
                </div>
            </div>
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">商品编号(SPU)：</span>
                </div>
                <div class="right">
                    <input type="text" disabled value='0755-88888888' th:value="${goodsInfo.productSn}">
                </div>
            </div>
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">商品描叙：</span>
                </div>
                <div class="right">
                    <textarea cols="30" rows="10" value="请填写公司主要产品线和优势产品，限100字" disabled
                              th:text="${goodsInfo.description}"></textarea>
                </div>
            </div>
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">商品展示图：</span>
                </div>
                <div class="right flex-warp">
                    <img class="img" id="img1"
                         src=""
                         alt="">
                    <img class="img" id="img2"
                         src=""
                         alt="">
                    <img class="img" id="img3"
                         src=""
                         alt="">
                    <img class="img" id="img4"
                         src=""
                         alt="">
                    <img class="img" id="img5"
                         src=""
                         alt="">
                </div>
            </div>
            <div class="all flex-center">
                <div class="left">
                    <span class="red">*</span>
                    <span class="name">图文介绍：</span>
                </div>
                <div class="right">
                        <pre th:text="${goodsInfo.detailHtml}">

                        </pre>
                </div>
            </div>
        </div>
        <div class="small-title">
            <div></div>
            <span>商品属性</span>
        </div>
        <div class="children">
            <thead>
            <tr>
                <th>商品编号(SKU)</th>
                <th>属性一</th>
                <th>属性一</th>
                <th>属性一</th>
                <th>属性一</th>
                <th>销售价</th>
                <th>库存</th>
                <th>展示图</th>
            </tr>
            </thead>

            <tbody>
            <!-- 遍历集合，如果被遍历的变量 userList 为 null 或者不存在，则不会进行遍历，也不报错-->
            <tr th:each="stocks :${goodsInfo.skuStocks}">
                <!-- 将用户的主键 uId 存在在 name 属性中-->
                <td th:text="${stocks.skuCode}"></td>
                <td th:text="${stocks.sp1}"></td>
                <!-- 使用dates对象格式化日期-->
                <td th:text="${stocks.sp2}"></td>
                <!-- 三运运算判断是否已婚-->
                <td th:text="${stocks.sp3}"></td>
                <td th:text="${stocks.sp4}"></td>
                <td th:text="${stocks.price}"></td>
                <td th:text="${stocks.stock}"></td>
                <td><img width="50px" height="50px" src="" th:src="${stocks.pic}"></td>
            </tr>
            </tbody>
        </div>
        <div class="children" th:if="${goodsInfo.verifyStatus} eq 0">
            <div class="button flex-center">
                <button class="closed" onclick="checkStart()">审核通过</button>
                <button class="refresh" data-toggle="modal" data-target="#myModal">审核不通过</button>
            </div>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            审核
                        </h4>
                    </div>
                    <div class="modal-body">
                        审核信息: <input id="content" type="text">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="checkRows()">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    </div>
</div>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('mall:store:edit')}]];
    var removeFlag = [[${@permission.hasPermi('mall:store:remove')}]];
    var prefix = ctx + "mall/check";
    var imgs = $("#albums").val();
    var strs = new Array();
    strs = imgs.split(",");

    if (strs.length === 1) {
        $("#img1").attr("src", strs[0]);
    }
    if (strs.length === 2) {
        $("#img2").attr("src", strs[1]);
    }
    if (strs.length === 3) {
        $("#img3").attr("src", strs[2]);
    }
    if (strs.length === 4) {
        $("#img4").attr("src", strs[3]);
    }
    if (strs.length === 5) {
        $("#img5").attr("src", strs[4]);
    }

    function checkStart() {
        var id = $("#productId").val();
        $.operate.post(prefix + "/through", {"id": id});

    }

    function checkRows() {
        var id = $("#productId").val();
        var content = $("#content").val();
        $.operate.post(prefix + "/noThrough", {"id": id, "content": content});
        $("#myModal").hide();
    }


    /**
     * 显示modal框
     */
    function showCheckModal() {
        $("#myModal").show();
    }

    /**
     * 隐藏modal框
     */
    function closeCheckModal() {
        $("#myModal").hide();
    }



</script>

</body>
</html>
